//@flow
import React, {PureComponent} from "react";
import {ActivityIndicator, InteractionManager, Modal, StyleSheet, View, WebView} from "react-native";
import {COLOR} from "../config";
import NavigationItem from "./base/NavigationItem";

type Props = {
  navigation: any
};

type State = {
  source: Object,
  visible: Boolean,
};

class WebScene extends PureComponent<Props, State> {
  static navigationOptions = ({navigation}) => ({
    headerTitle: navigation.state.params.title,
    headerStyle: {
      backgroundColor: COLOR.backgroundDarkLighter,
    },
    headerTintColor: '#ffffff',
    headerLeft: (
      <NavigationItem
        icon={require('../res/img/close.png')}
        iconStyle={{
          width: 20,
          height: 20,
          //margin: 8,
        }}
        onPress={() => navigation.goBack()}
      />
    ),
  })

  constructor(props: Props) {
    super(props);
    this.onLoadEnd = this.onLoadEnd.bind(this)
    this.state = {
      visible: true,
      source: {}
    };
  }

  componentDidMount() {
    InteractionManager.runAfterInteractions(() => {
      this.props.navigation.setParams({title: "加载中"});
      this.setState({
        source: {uri: this.props.navigation.state.params.uri}
      });
    });
  }

  render() {
    const state = `window.__INITIAL_STATE__ = {
      user: {
        isLogged: true,
        userInfo:{id:1060},
        roles:["ROLE_AD_USER", "ROLE_USER", "ROLE_ADMIN", "ROLE_AUDITOR"],
        token:
          "eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoiMTA2MCIsInVzZXJfbmFtZSI6IjE1MjEwMzQ1NTY5IiwiY3JlYXRlZCI6MTUxNzY0MDgzNTYwNSwicm9sZXMiOlsiUk9MRV9BRF9VU0VSIiwiUk9MRV9VU0VSIiwiUk9MRV9BRE1JTiIsIlJPTEVfQVVESVRPUiJdLCJleHAiOjE1MTgyNDU2MzUsImF1dGhvcml0aWVzIjpbImNvbS5idWRlZS5vMm8ud2ViLmNvbnRyb2xsZXIuVGVzdENvbnRyb2xsZXIuZG9GaW5kIiwicGhvdG9zOnZpZXc6MiJdfQ.EfCCkXX9fRWLD866AVQUvrR2gGWVDQh9MjOn8Cc5iGmZOp-F_B51apzB4g7_DMsIGC2Z7RN7fHGDPdjD7HNVjg",
        xUSSid: "95012bed-abaf-4384-9bc6-7c0e38f0b88b",
      }
    }`;
    return (
      <View style={styles.container}>
        <WebView
          automaticallyAdjustContentInsets={false}
          style={styles.webView}
          source={this.state.source}
          onLoadEnd={this.onLoadEnd}
          injectedJavaScript={state}
          scalesPageToFit={false}
        />
        <Modal
          animationType={'none'}
          transparent
          onRequestClose={this.onLoadEnd}
          visible={this.state.visible}
        >
          <View style={styles.loading}>
            <ActivityIndicator
              animating
              color={COLOR.indicatorColor}
              size="large"
            />
          </View>
        </Modal>
      </View>
    );
  }

  onLoadEnd(e: any) {
    this.setState({
      visible: false,
    })
    if (e.nativeEvent.title.length > 0) {
      this.props.navigation.setParams({title: e.nativeEvent.title});
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //backgroundColor: "#2c3e50"
  },
  webView: {
    flex: 1,
    //backgroundColor: "white"
  },
  loading: {
    marginTop: 64,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default WebScene;
